<template>
  <div>
    <van-field
      label="国家或地区"
      value="中国"
      input-align="right"
      class="area"
      readonly
    />
    <van-form @submit="onSubmit" class="form">
      <div style="margin: 16px">
        <van-field
          v-model="username"
          type="tel"
          label="中国 (+86) > |"
          placeholder="手机号"
          name="pattern"
          :rules="[{ pattern, message: '手机号不正确' }]"
        />
         <van-field
        v-model="userpwd"
        :type="type"
        name="密码"
        label="密码"
        placeholder="密码"
        :right-icon="typeicon"
        @click="xianshi(typeicon)"
      />  
      <div class="to-login">
        <span @click="tologin">密码登录</span>
      </div>
        <van-button round block type="info" native-type="submit">
          登录/注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
Vue.use(Form);
Vue.use(Field);
export default {
  data() {
    return {
      // usertel: "",
      txt: "",
      username: "",
      userpwd: "",
      pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
      type: "password",
      typeicon: "closed-eye",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
        if(this.username in localStorage){
          Vue.prototype.$toast("用户名已存在")
        }else{
          localStorage.setItem(this.username,this.userpwd);
          Vue.prototype.$toast("注册成功");
          this.$router.push("/login");
        }
    },
    xianshi(val) {
      if (val == "closed-eye") {
        this.type = "text";
        this.typeicon = "eye-o";
      } else {
        this.type = "password";
        this.typeicon = "closed-eye";
      }
    },

    tologin(){
      this.$router.push("/login")
    }
  },
};
</script>

<style>
.area {
  width: 90%;
  margin: 2.125rem auto;
}
.form {
  margin-top: -1.125rem;
}
.to-login{
margin: 1rem;
display: flex;
justify-content: space-between;
font-size: .8rem;
color: rgb(19, 93, 253);
font-weight: 700;
justify-content: end;
}
</style>